<demo>
## 自定义（全局）
加入你的想法
</demo>

<!-- #region snippet -->
<script setup>
import { LoadingOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { h } from 'vue'
import { Loading } from '@/components'

defineOptions({
  name: 'GlobalCustom',
})

function handleShow() {
  Loading({
    description: '加载中',
  })

  hide()
}

function handleCustomIcon() {
  Loading({
    icon: LoadingOutlined,
  })

  hide()
}

function handleError() {
  Loading({
    icon: h('img', {
      style: { width: '140px', height: 'auto' },
      src: '',
    }),
    description: h('div', { class: 'mt-8-1 color-text' }, ['加载失败，', h('a', { onClick: reload }, '重新加载')]),
  })
}

/**
 * 隐藏
 * @param timeout
 */
function hide(timeout = 2000) {
  setTimeout(() => {
    Loading.destroy()
  }, timeout)
}

function reload() {
  Loading.destroy()
  message.success('点击了重新加载')
}
</script>

<template>
  <a-space>
    <a-button
      type="primary"
      @click="handleShow()"
    >
      自定义文案
    </a-button>
    <a-button
      type="primary"
      @click="handleCustomIcon()"
    >
      自定义 icon
    </a-button>
    <a-button
      type="primary"
      @click="handleError()"
    >
      加载失败
    </a-button>
  </a-space>
</template>

<style lang="less" scoped></style>
<!-- #endregion snippet -->
